<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="BasicPieceWork">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="搬运项目名称和单价" key="1" v-if="permissionStore.hasPermisson('jczl.byxmmchdj')">
                    <div style="height: 100%;">
                        <NameAndPrice></NameAndPrice>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="乐捐类型" key="2" v-if="permissionStore.hasPermisson('jczl.kblx')">
                    <div style="height: 100%;">
                        <BuckleType></BuckleType>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="调修机类型和单价" key="3" v-if="permissionStore.hasPermisson('jczl.txjlxhdj')">
                    <div style="height: 100%;">
                        <TuningMachineType></TuningMachineType>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="拆纱单价" key="4" v-if="permissionStore.hasPermisson('jczl.csdj')">
                    <div style="height: 100%;">
                        <YarnRemovalPrice></YarnRemovalPrice>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="坯布单价" key="5" v-if="permissionStore.hasPermisson('jczl.pbdj')">
                    <div style="height: 100%;">
                        <FabricPrice></FabricPrice>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="验布机型单价基础表" key="6">
                    <div style="height: 100%;">
                        <FabricPrice1></FabricPrice1>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="值机重量区间单价" key="7">
                    <div style="height: 100%;">
                        <FabricPrice2></FabricPrice2>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="自动开乐捐单设定" key="8">
                    <div style="height: 100%;">
                        <zdkljdsd></zdkljdsd>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="生产补贴类型设定" key="9">
                    <div style="height: 100%;">
                        <scbtlxsd></scbtlxsd>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'
// import zdkljdsd from './components/zdkljdsd.vue'
// import scbtlxsd from './components/scbtlxsd.vue'

export default defineComponent({
    name: 'BasicPieceWork',
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })

        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
            if (e === '1') {
                emitter.emit('NameAndPrice')
            } else if (e === '2') {
                emitter.emit('BuckleType')
            } else if (e === '3') {
                emitter.emit('TuningMachineType')
            } else if (e === '4') {
                emitter.emit('YarnRemovalPrice')
            } else if (e === '5') {
                emitter.emit('FabricPrice')
            } else if (e === '6') {
                emitter.emit('FabricPrice1')
            } else if (e === '7') {
                emitter.emit('FabricPrice2')
            }else if (e === '8') {
                emitter.emit('zdkljdsd')
            }else if (e === '9') {
                emitter.emit('scbtlxsd')
            }
        }
        const permissionStore = usePermission()
        return {
            pageData,
            tabsChange,
            permissionStore
        }
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}
</style>